class FirstPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
               
            ], list1: [], additem1: [],
            room: { name: '', id: '' },
            thumburl: '',
            name: '',
            wj: [], cp: [],
            id: '0',
            partcount: 1,
            parts: [{ src: '' }, { src: '' }, { src: '' }],
            categorylist: [],
            select_swiperlink: { name: '请选择' },
            totalcount: 0,
            total: 0,
            wjcid1: '',
            category_select_list: [],
            recommendtablehtml: [],
            recommendlist: [],
            goods_select_html: [],
            currentswipertype: 0,
            swiperlinkhtml: [],
            swipertablehtml: [],
            swiperimghtml: [],
            catesublist: [],
            subtitle: '',
            sel_cate: '-1',
            showadd:!1,
            showadd1:!1,
            swiper: {
                imgs: [],
                links: []
            },
            fileimgshow: !0,
            imgstate: '',
            imgsrc: '',
            to: '',
            additem: {
                type: 'CP',
                pid: '',
                cid: '-1',
                cid1: '-1',
                cname: '',
                height: "",
                width: "",
                deep: "",
                singleprice: 0,
                count: '',
                amount: '',
                unit: '',
                lmsm: '',
                mbcz: '',
                gtcz: '',
            },
            totalcount1:0,
            total1:0,
            additem1: {
                type: 'WJ',
                pid: '',
                cid: '-1',
                cid1: '-1',
                cname: '',
                height: "",
                width: "",
                deep: "",
                singleprice: 0,
                count: '',
                amount: '',
                unit: '',
                lmsm: '',
                mbcz: '',
                gtcz: '',
            }
        };
    }


    newadditem(t) {
        if (t == 0) {
            this.setState({
                additem: {
                    type: 'CP',
                    pid: '',
                    cid: '-1',
                    cid1: '-1',
                    cname: '',
                    height: "",
                    width: "",
                    deep: "",
                    singleprice: 0,
                    count: '',
                    amount: '',
                    unit: '',
                    lmsm: '',
                    mbcz: '',
                    gtcz: '',
                }
            })
        } else {
            this.setState({
                additem1: {
                    type: 'WJ',
                    pid: '',
                    cid: '-1',
                    cid1: '-1',
                    cname: '',
                    height: "",
                    width: "",
                    deep: "",
                    singleprice: 0,
                    count: '',
                    amount: '',
                    unit: '',
                    lmsm: '',
                    mbcz: '',
                    gtcz: '',
                }
            })

        }
    }

    componentDidMount() {
        let id = GetQueryString('id');
        $('.modal1').hide()
        this.setState({ id }, () => {
            if(id!='null'){
                this.freshlist()
            }

            dz_categetlist(res => {
                if (res.issuccess == 1) {
                    let { list } = res

                    let cate_CPLBhtml = [], cate_GTCZhtml = [], cate_WJLBhtml = [], cate_WJCZhtml = [];
                    let list_CPLB = list.filter(x => x.type == 'CPLB')
                    let list_GTCZ = list.filter(x => x.type == 'GTCZ')
                    let list_WJLB = list.filter(x => x.type == 'WJLB')
                    let list_WJCZ = list.filter(x => x.type == 'WJCZ')
                    console.log({ list_CPLB, list_GTCZ, list_WJLB, list_WJCZ }, 'list1');

                    cate_CPLBhtml.push(<option value={-1}>请选择 </option>)
                    list_CPLB.forEach((x, i) => {
                        cate_CPLBhtml.push(
                            <option key={i} value={x.id}>{x.name} </option>
                        )
                    }) 

                    cate_GTCZhtml.push(<option value={-1}>请选择 </option>)
                    list_GTCZ.forEach((x, i) => {
                        cate_GTCZhtml.push(
                            <option key={i} value={x.id}>{x.name} </option>
                        )
                    })

                    cate_WJLBhtml.push(<option value={-1}>请选择 </option>)
                    list_WJLB.forEach((x, i) => {
                        cate_WJLBhtml.push(
                            <option key={i} value={x.id}>{x.name} </option>
                        )
                    })

                    cate_WJCZhtml.push(<option value={-1}>请选择 </option>)
                    list_WJCZ.forEach((x, i) => {
                        cate_WJCZhtml.push(
                            <option key={i} value={x.id}>{x.name} </option>
                        )
                    })

                    // catehtml1.push(<option value={-1}>请选择</option>)
                    // res.list1.forEach((x, i) => {
                    //     catehtml1.push(
                    //         <option key={i} value={x.id}>{x.name} </option>
                    //     )
                    // })
                    this.setState({
                        cate_CPLBhtml, list_CPLB, cate_GTCZhtml, list_GTCZ, list_WJLB
                        , cate_WJLBhtml, cate_WJCZhtml, list_WJCZ
                    })
                }

            })

            //     dz_getcategorylist(res=>{
            //         if(res.issuccess==1){
            //          this.setState({categorylist:res.list})
            //     }
            //  })

            //  dz_getallsubcategory(-1,res=>{
            //     if(res.issuccess==1){
            //         let catesubhtml = [];
            //         catesubhtml.push(
            //             <option  value={-1}>请选择 </option>
            //         )
            //         res.list.forEach((x,i)=>{
            //             catesubhtml.push(
            //                 <option key={i} value={x.id}>{x.name} </option>
            //             )
            //         })

            //         this.setState({catesublist:res.list,catesubhtml})
            //    }
            // })


        })

    }
    freshlist() {
        let { id } = this.state;
        dz_getprojectitemlist(id, res => {
            if (res.issuccess == 1) {
                let { room, wj, cp } = res;
                this.setState({ room, wj, cp })

                // this.setState({list})
                // this.formatlist(res.list);      
                console.log(res.list)
            }
        })

    }



    /**新建 */
    add() {

        $('.modal1').show()
        //    var name = prompt('请输入分类名称');
        //    if(name!=null){
        //     aoedzcate({name},res=>{
        //         if(res.issuccess='1'){
        //             this.freshlist()  
        //         }
        //     })
        //    }
    }



    // 编辑
    edit(x) {
        var name = prompt('请编辑分类名称', x.name)
        if (name != '') {
            aoedzcate({ id: x.id, name }, res => {
                if (res.issuccess == 1) {
                    this.freshlist()
                } else {
                    alert(res.msg)
                }
            })
        }

        // 
    }
    tosub(x) {
        window.location.href = "./dz_subcate.html?id=" + x.id + "&name=" + x.name;
    }
    // 排序
    toorder(id) {
        let orders = prompt("请输入1-999的正整数"), { start } = this.state
        if (orders == "" || orders == null) {
            return;
        }
        if (isNaN(orders) || orders < 1 || orders > 999) {
            return;
        }
        orders = Math.floor(orders);
        Swipersetorders({ id, orders }, res => {
            if (res.issuccess == 1) {
               // alert("设置成功");
                this.freshlist(start);
            }
        });
    }
    // // 上架下架
    // setshow(e, i, cid) {
    //     let { start } = this.state
    //     Goodssetstate({ id: e, cid }, res => {
    //         if (res.issuccess == 1) {
    //             alert(`${i == "0" ? '下架' : '上架'}成功`)
    //             this.freshlist(start)
    //         }
    //     })
    // }
    // 删除
    del(e, cid) {
        this.setState({ delid: e, newcid: cid }, () => {
            $('#myModal').modal('toggle');
        })
    }

    confirmdel() {
        let { delid, start } = this.state
        dz_projectitem_del(delid, res => {
            if (res.issuccess == 1) {
              //  alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist()
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }

    closemodal() {
        $('.modal1').hide()
    }

    inputchange(prop, e) {
        this.setState({ [prop]: e.target.value })
    }
    confirm() {

        let { modalindex, mbcz, gtcz, list } = this.state, err = '';
        if (modalindex < 0) {
            let { additem } = this.state;
            additem['mbcz'] = mbcz
            additem['gtcz'] = gtcz
            this.setState({ additem })
        } else {
            list[modalindex]['mbcz'] = mbcz
            list[modalindex]['gtcz'] = gtcz
            this.setState({ list })
        }
        $('.modal1').hide()
        // let data = {pid:id,cid:sel_subcate,cname:sel_cname,height,lmsm,count,width,unit,deep,mbcz,gtcz,singleprice:sel_singleprice}

        // dz_projectitem_aoe(data,res=>{
        //     $('.modal1').hide()
        //     if(res.issuccess==1){
        //         alert('提交成功')
        //         this.setState({
        //             sel_subcate:'-1',sel_cname:'',height:'',lmsm:'',count:'',width:'',unit:'',deep:'',mbcz:'',gtcz:'',sel_singleprice:'' 
        //         })
        //         this.freshlist()
        //     }
        // })
    }

    toitem(id) {
        window.location.href = './dz_item.html?id=' + id
    }

    selectflchange(e) {
        console.log(e, 'eee');
        let { value } = e.target
        if (this.state.sel_cate != value) {
            this.setState({ sel_cate: value })
            dz_getsubcategorylist(value, res => {
                if (res.issuccess == 1) {
                    let catesubhtml = [];
                    catesubhtml.push(
                        <option value={-1}>请选择 </option>
                    )
                    res.list.forEach(x => {
                        catesubhtml.push(
                            <option key={i} value={x.id}>{x.name} </option>
                        )
                    })

                    this.setState({ catesublist: res.list, catesubhtml })
                }
            })
        }

    }

    selectsubflchange(i, e) {
        console.log({ i, e }, 'eee-selectsubflchange');
        let { value } = e.target, { categorylist1, list } = this.state;
        console.log(value, 'selectsubflchange');
        let item = catesublist.find(x => x.id == value);
        console.log('item', item);
        list[i]['cid'] = item.id
        list[i]['cname'] = item.name
        //  list[i]['singleprice'] = item.price
        list[i]['unit'] = item.unit



        // console.log(item,'item');
        this.setState({ list })



    }

    selectaddlchange(i, e) {
        console.log({ i, e });
        let { value } = e.target, { categorylist } = this.state;
        let item = categorylist.find(x => x.id == value);
        if (i < 0) {
            let { additem } = this.state;
            console.log('item', item);
            additem['cid'] = item.id
            additem['cname'] = item.name
            //  additem['singleprice'] = item.price
            additem['unit'] = item.unit
            this.setState({ additem })
        } else {
            let { list } = this.state
            list[i]['cid'] = item.id
            list[i]['cname'] = item.name
            list[i]['unit'] = item.unit
            this.setState({ list })
        }
    }







    selectaddlchange1(i, e) {
        let { value } = e.target, { categorylist1 } = this.state;
        let item = categorylist1.find(x => x.id == value);
        if (i > -1) {
            let { list } = this.state;
            list[i]['cid1'] = item.id
            list[i]['cname1'] = item.name
            list[i]['singleprice'] = item.price
            this.setState({ list })
        } else {
            let { additem } = this.state;
            additem['cid1'] = item.id
            additem['cname1'] = item.name
            additem['singleprice'] = item.price
            //additem['unit'] = item.unit
            this.setState({ additem })
        }
    }



    export() {
        let { list, topname, housename } = this.state;
        let str = `${topname}\n${housename}\n产品类型,高,宽,深度,单价,数量,总价,单位,立面说明,门板材质/柜体材质\n`
        const jsonData = []
        let total = 0;
        let totalcount = 0;

        // <td className="tconter">{((Number(x.height)* Number(x.width))/1000000).toFixed(2)}</td>
        //                                    <td className="tconter">{(Number(x.singleprice)* (((Number(x.height)* Number(x.width))/1000000).toFixed(2))).toFixed(2)}</td>

        list.forEach(x => {
            let amount = (Number(x.singleprice) * (((Number(x.height) * Number(x.width)) / 1000000).toFixed(2))).toFixed(2)
            let count = ((Number(x.height) * Number(x.width)) / 1000000).toFixed(2)
            jsonData.push({
                cname: x.cname, height: x.height, width: x.width, deep: x.deep, singleprice: x.singleprice,
                count,
                amount, unit: x.unit, lmsm: x.lmsm, cname1: x.cname1
            })
            x['amount'] = amount
            total = Number(total) + Number(amount)
            totalcount = Number(totalcount) + Number(count)
            // jsonData.push(x)
        })

        for (let i = 0; i < jsonData.length; i++) {
            for (let item in jsonData[i]) {
                str += `${jsonData[i][item] + '\t'},`;
            }
            str += '\n';
        }

        str += '数量合计,' + totalcount + ',总价合计,' + total

        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = name + ".csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);


        //  this.down()


    }

    // save(i) {
    //     console.log(i, 'uiiii');
    //     if (i > -1) {
    //         let { list } = this.state;
    //         list[i]['count'] = ((Number(list[i].height) * Number(list[i].width)) / 1000000).toFixed(2)


    //         console.log(list[i], 'item---save');

    //         dz_projectitem_aoe(list[i], res => {
    //             if (res.issuccess == 1) {
    //                 alert('保存成功')
    //             } else {
    //                 alert(res.msg)
    //             }
    //         })
    //     } else {
    //         let { additem } = this.state
    //         additem['pid'] = this.state.id
    //         additem['count'] = ((Number(additem.height) * Number(additem.width)) / 1000000).toFixed(2)
    //         console.log(additem, 'item---save');
    //         dz_projectitem_aoe(additem, res => {
    //             if (res.issuccess == 1) {
    //                 alert('新增成功')
    //                 this.newadditem()
    //                 this.freshlist()
    //             } else {
    //                 alert(res.msg)
    //             }
    //         })
    //     }
    // }

    input(prop, i) {
        
        var _def="";
        if(i>-1) _def=this.state['cp'][i][prop]
        var  value = prompt('请输入',_def);
        if (value.length > 0) {
            let { cp } = this.state,data = {id:cp[i].id,prop,value}
            //  cp[i][prop] = value;
            if(prop=='width'){
                data['count'] = ((Number(cp[i].height) * Number(value)) / 1000000).toFixed(2)
            }
            if(prop=='height'){
                data['count'] = ((Number(cp[i].width) * Number(value)) / 1000000).toFixed(2)
            }
            dz_projectitem_editsingle(data,res=>{
                if(res.issuccess==1){
                 //   alert('修改成功')
                    this.freshlist()
                }else{
                    alert(res.msg)
                }
            })



           // this.setState({ cp })
        }
        //  console.log({prop,i,e});
    }

    input_1(prop, i) {
        var value = prompt('请输入');
        if (value.length > 0) {
            let { wj } = this.state, data = {id:wj[i].id,prop,value}
            // wj[i][prop] = value;
            // this.setState({ wj })
            dz_projectitem_editsingle(data,res=>{
                if(res.issuccess==1){
                  //  alert('修改成功')
                    this.freshlist()
                }else{
                    alert(res.msg)
                }
            })
        }
        //  console.log({prop,i,e});
    }

    inputa(prop) {
        var value = prompt('请输入');
        if (value.length > 0) {
            // let { additem } = this.state;
            // additem[prop] = value;
            // this.setState({ additem })
           let data = {type1:prop,value1:value,roomid:this.state.id}
           this.addn(data,0)



        }
        //  console.log({prop,i,e});
    }

    addn(data,n){
        dz_projectitem_addnew(data,res=>{
            if(res.issuccess==1){
                this.newadditem(n)
                this.freshlist()
                let prop = n==0?'showadd':'showadd1'
                this.setState({[prop]:!1})
            }
        })
    }


    inputb(prop) {
        var value = prompt('请输入');
        if (value.length > 0) {
            let { additem1 } = this.state;
            additem1[prop] = value;
            this.setState({ additem1 })
        }
        //  console.log({prop,i,e});
    }


    showmodal1(i) {

        this.setState({ modalindex: i }, () => {
            $('.modal1').show()
        })

    }



    // down() {
    //     const jsonData = [
    //         {
    //             name: '路人甲',
    //             phone: '123456789',
    //             email: '000@123456.com'
    //         },
    //         {
    //             name: '炮灰乙',
    //             phone: '123456789',
    //             email: '000@123456.com'
    //         },
    //         {
    //             name: '土匪丙',
    //             phone: '123456789',
    //             email: '000@123456.com'
    //         },
    //         {

    //         },
    //         {
    //             name: '流氓丁',
    //             phone: '123456789',
    //             email: '000@123456.com'
    //         },
    //     ]

    //     //列标题，逗号隔开，每一个逗号就是隔开一个单元格
    //     let str = `姓名,电话,邮箱\n`;
    //     //增加\t为了不让表格显示科学计数法或者其他格式
    //     for (let i = 0; i < jsonData.length; i++) {
    //         for (let item in jsonData[i]) {
    //             str += `${jsonData[i][item] + '\t'},`;
    //         }
    //         str += '\n';
    //     }
    //     //encodeURIComponent解决中文乱码
    //     let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //     //通过创建a标签实现
    //     let link = document.createElement("a");
    //     link.href = uri;
    //     //对下载的文件命名
    //     link.download = "json数据表.csv";
    //     document.body.appendChild(link);
    //     link.click();
    //     document.body.removeChild(link);
    // }

    save_cp(i) {
        if (i > -1) {
            let { cp } = this.state, list = cp;
            list[i]['count'] = ((Number(list[i].height) * Number(list[i].width)) / 1000000).toFixed(2)

            dz_projectitem_aoe(list[i], res => {
                if (res.issuccess == 1) {
                 //   alert('保存成功')
                } else {
                    alert(res.msg)
                }
            })
        } else {
            let { additem } = this.state, err = ''
            if (additem.cid1 < 0) err = '请选择柜体材质'
            if (additem.cid < 0) err = '请选择产品类型'
            if (additem.height == '') err = '请输入高度'
            if (additem.width == '') err = '请输入宽度'
            if (err != '') {
                alert(err)
                return;
            } else {
                additem['roomid'] = this.state.id
                additem['count'] = ((Number(additem.height) * Number(additem.width)) / 1000000).toFixed(2)
                console.log(additem, 'additemadditem');
                dz_projectitem_aoe(additem, res => {
                    if (res.issuccess == 1) {
                     //   alert('新增成功')
                        this.newadditem(0)
                       this.setState({showadd:!1})
                        this.freshlist()
                    } else {
                        alert(res.msg)
                    }
                })
            }
        }

    }
    save_wj(i) {
        if (i > -1) {
            let { wj } = this.state, list = wj;
            dz_projectitem_aoe(list[i], res => {
                if (res.issuccess == 1) {
                  //  alert('保存成功')
                } else {
                    alert(res.msg)
                }
            })
        } else {
            let { additem1 } = this.state, err = ''
            if (additem1.cid1 < 0) err = '请选择五金材质'
            if (additem1.cid < 0) err = '请选择五金类型'
            if (isNaN(additem1.count) || Number(additem1.count) <= 0) err = '数量输入有误'
            if (err != '') {
                alert(err)
                return;
            } else {
                additem1['roomid'] = this.state.id
                dz_projectitem_aoe(additem1, res => {
                    if (res.issuccess == 1) {
                     //   alert('新增成功')
                        this.setState({showadd1:!1})
                        this.newadditem(1)
                        this.freshlist()
                    } else {
                        alert(res.msg)
                    }
                })
            }
        }

    }


    selectchange(i, t, e) {
        let { value } = e.target
        if (i < 0) {  //新建行
            //   console.log(i,'新建行');
            let { additem, additem1,id } = this.state;
            // if (t == 'CPLB') {
            //     let { list_CPLB } = this.state, item = list_CPLB.find(x => x.id == value);
            //     // additem['cid'] = item.id
            //     // additem['cname'] = item.name
            //     // additem['unit'] = item.unit
            //     let data1 = {roomid:id,type1:'cid',value1:item.id,type2:'cname'
            //     ,value2:item.name,type3:'unit',value3:item.unit}
            //     this.addn(data1,0)
            // }
            if (t == 'WJLB') {
                let { list_WJLB } = this.state, item = list_WJLB.find(x => x.id == value);
                console.log(item,'itemitem--WJLB');
                // additem1['cid'] = item.id
                // additem1['cname'] = item.name
                // additem1['unit'] = item.unit
                let data1 = {type:'WJ',   roomid:id,type1:'cid1',value1:item.id,type2:'cname1'
                ,value2:item.name,type3:'unit',value3:item.unit,value4:item.price,type4:'singleprice'}
                this.addn(data1,1)

            }
            if (t == 'GTCZ') {
                let { list_GTCZ } = this.state, item = list_GTCZ.find(x => x.id == value);
                //  let p = list_+t
                // console.log(this.state[p],'gtcz');
                // additem['cid1'] = item.id
                // additem['cname1'] = item.name
                // additem['singleprice'] = item.price

  let data1 = {roomid:id,type1:'cid1',type4:'unit',value4:item.unit, value1:item.id,type2:'cname1'
                ,value2:item.name,type3:'singleprice',value3:item.price}
                this.addn(data1,0)



                //  additem['unit'] = item.unit
            }

            if (t == 'WJCZ') {
                let { list_WJCZ } = this.state, item = list_WJCZ.find(x => x.id == value);
                //  let p = list_+t
                // console.log(this.state[p],'gtcz');
                // additem1['cid1'] = item.id
                // additem1['cname1'] = item.name
                // additem1['singleprice'] = item.price
                //  additem['unit'] = item.unit

                let data1 = {type:'WJ',roomid:id,type1:'cid1',value1:item.id,type2:'cname1'
                ,value2:item.name,type3:'singleprice',value3:item.price,type4:'unit',value4:item.unit}
                this.addn(data1,1)

            }
            this.setState({ additem, additem1 })

        } else {
            let { cp, wj } = this.state,data = {prop:t};
           
            if (t == 'GTCZ') {
                let { list_GTCZ } = this.state, item = list_GTCZ.find(x => x.id == value);
                //  let p = list_+t
                // console.log(this.state[p],'gtcz');
                // cp[i]['cid1'] = item.id
                // cp[i]['cname1'] = item.name
                // cp[i]['singleprice'] = item.price
                //  additem['unit'] = item.unit
                data = {id:cp[i].id,unit:item.unit,cid:item.id,name:item.name,prop:'GTCZ',price:item.price}
            }
            if (t == 'WJLB') {
                let { list_WJLB } = this.state, item = list_WJLB.find(x => x.id == value);
                // wj[i]['cid'] = item.id
                // wj[i]['cname'] = item.name
                // wj[i]['unit'] = item.unit
                data = {id:wj[i].id,name:item.name,price:item.price,unit:item.unit,prop:t,cid:item.id}
            }

            if (t == 'WJCZ') {
                let { list_WJCZ } = this.state, item = list_WJCZ.find(x => x.id == value);

                //  let p = list_+t
                // console.log(this.state[p],'gtcz');
                // wj[i]['cid1'] = item.id
                // wj[i]['cname1'] = item.name
                // wj[i]['singleprice'] = item.price
                //  additem['unit'] = item.unit
                data = {id:wj[i].id,cid:item.id,name:item.name,prop:'WJCZ',price:item.price,unit:item.unit}
            }
            dz_projectitem_editsingle(data,res=>{
                if(res.issuccess==1){
                  //  alert('修改成功')
                    this.freshlist()
                }else{
                    alert(res.msg)
                }
            })


           // this.setState({ cp, wj })


        }



        //  console.log('selectchange',{t,i,e});

    }

    newline(prop){
        this.setState({[prop]:!0})
    }






    render() {

        // this.setState({cate_CPLBhtml,list_CPLB,cate_GTCZhtml,list_GTCZ,list_WJLB
        //     ,cate_WJLBhtml,cate_WJCZhtml,list_WJCZ })

        var { totalcount, total, cid1, wj, cp, additem1, cate_CPLBhtml, list_CPLB, cate_GTCZhtml, list_GTCZ, list_WJLB
            , cate_WJLBhtml, cate_WJCZhtml,showadd,showadd1, list_WJCZ, room, sel_subcate, height, lmsm, count, unit, deep,
            mbcz, gtcz,totalcount1,total1, sel_cate, list, name, wjcid1, sel_singleprice, width, additem, catehtml } = this.state;
        console.log(additem, 'additem');
   
        cp.forEach(x => {
            totalcount = (Number(totalcount) + Number(((Number(x.height) * Number(x.width)) / 1000000))).toFixed(2)
            total =  Math.round(Number(total) + 
            Number(x.singleprice) * ((Number(x.height) * Number(x.width)/ 1000000)))
        })
        wj.forEach(x => {
            totalcount1 = (Number(totalcount1) + Number(x.count)).toFixed(2)
            total1 =  Math.round(Number(total1) + Number(x.singleprice)* Number(x.count))
        })
        return (
            <div className="breadLinebox">


                <div className="modal1" >
                    <div onClick={this.closemodal.bind(this)} className="mask"></div>
                    <div className="wrap">
                        <div className="content">
                            <p className="p1">门板材质</p>
                            <input placeholder="请输入门板材质" allowClear value={mbcz} onChange={this.inputchange.bind(this, 'mbcz')} className="input" />
                        </div>
                        <div className="content">
                            <p className="p1">柜体材质</p>
                            <input placeholder="请输入门板材质" allowClear value={gtcz} onChange={this.inputchange.bind(this, 'gtcz')} className="input" />
                        </div>

                        <div className="btns">
                            <p className="add" onClick={this.confirm.bind(this)}>确定</p>
                            <p className="add" onClick={this.closemodal.bind(this)}>取消</p>
                        </div>
                    </div>

                </div>
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className='content_wrap panel-default content_wrap'>
                    <div onClick={() => { window.location.href = './dz_room.html' }} className='breadLine '>
                        <p>返回</p>

                    </div>
                    {/* <div className='inputs panel-body'>
                        <h3>首页管理</h3>
                    </div> */}
                    <div  className="topdiv">
                        <p  >房间名：</p>
                        <p style={{'marginRight':15}}>{room.name}</p>
                        <p  >  总金额：</p>
                        <p style={{'fontSize':20}}>{(Number(total)+Number(total1)).toFixed(2)}</p>
                        {/* <input type="text" value={housename} placeholder="请输入房间名" onChange={this.inputchange.bind(this,'housename')}/> */}
                    </div>
                    <div className="content form">
                        <table className="tab">
                            <thead>
                                <tr>
                                    {/* <th className="minwidth tconter"><img src="./src/notselection.png"/></th> */}

                                    <th className="tconter">序号</th>
                                    <th className="tconter">产品类型</th>
                                    <th className="cz tconter">宽度</th>
                                    <th className="tconter">高度</th>
                                    <th className="cz tconter">深度</th>
                                    <th className="cz tconter">数量</th>
                                    <th className="cz tconter">单位</th>
                                    <th className="cz tconter">单价</th>
                                    <th className="cz tconter">总价</th>
                                    <th className="cz tconter">立面说明</th>
                                    <th className="cz tconter">门板材质/柜体材质</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    cp.map((x, i) => {
                                        return (
                                            <tr key={i}>
                                                {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                                <td className="tconter">{i + 1}</td> 
                                                {/* <td className="tconter select1">
                                                    <select value={x.cid} onChange={this.selectchange.bind(this, i, 'CPLB')}>  {cate_CPLBhtml} </select>
                                                </td> */}

                                                <td onClick={this.input.bind(this, 'cname', i)} className="tconter">{x.cname}</td>

                                                <td onClick={this.input.bind(this, 'width', i)} className="tconter">{x.width}</td>
                                                <td onClick={this.input.bind(this, 'height', i)} className="tconter">{x.height}</td>
                                                <td onClick={this.input.bind(this, 'deep', i)} className="tconter">{x.deep}</td>
                                                <td className="tconter">{x.count}</td>
                                                <td className="tconter">{x.unit}</td>
                                                <td onClick={this.input.bind(this, 'singleprice', i)} className="tconter">{x.singleprice}</td>
                                                <td className="tconter">{Math.round(Number(x.singleprice) * (Number(x.count)))}</td>
                                                <td onClick={this.input.bind(this, 'lmsm', i)} className="tconter">{x.lmsm}</td>
                                                <td className="tconter">
                                                    {/* {x.mbcz}/{x.gtcz} */}
                                                    <select value={x.cid1} onChange={this.selectchange.bind(this, i, 'GTCZ')}>  {cate_GTCZhtml} </select>
                                                </td>
                                                <td className="operatebox">
                                                    <div className='operate' id={"ope" + x.id}>
                                                        {/* <p className='edit' onClick={this.save_cp.bind(this, i)}>保存</p> */}
                                                        <p className='edit'  onClick={this.newline.bind(this,'showadd')}>新建</p>
                                                        {/* <div data-toggle="modal" data-target="#modalOne">
                                                       <img src="./src/edit.png"/>
                                                       <p className='edit'  onClick={this.edit.bind(this,x)}>编辑</p>
                                                   </div> */}
                                                        {/* <div>
                                                       <img src={`./src/${x.state=="1"?"hide":"show"}.png`}/>
                                                       <p className='edit' onClick={this.setshow.bind(this,x.id,x.state)}>{x.state=="0"?"隐藏":"显示"}</p>
                                                   </div> */}
                                                        <div>
                                                            <img src="./src/del.png" />
                                                            <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        )

                                    })
                                }
                                {
                                    //  let amout = 0;
                                    <tr style={{display:(showadd||cp.length==0)?"":"none"}}>
                                        {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                        {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                        <td className="tconter">新建行</td>
                                        {/* <td className="tconter">
                                            <select value={additem.cid} onChange={this.selectchange.bind(this, -1, 'CPLB')}>  {cate_CPLBhtml} </select>
                                        </td> */}
                                        <td onClick={this.inputa.bind(this, 'cname')} className="tconter">{additem.cname}</td>
                                        <td onClick={this.inputa.bind(this, 'width')} className="tconter">{additem.width}</td>
                                        <td onClick={this.inputa.bind(this, 'height')} className="tconter">{additem.height}</td>
                                        <td onClick={this.inputa.bind(this, 'deep')} className="tconter">{additem.deep}</td>
                                        <td className="tconter">{((Number(additem.height) * Number(additem.width)) / 1000000).toFixed(2)}</td>
                                        <td className="tconter">{additem.unit}</td> 
                                        <td className="tconter">{additem.singleprice}</td>
                                        <td className="tconter">{(Number(additem.singleprice) * ((Number(additem.height) * Number(additem.width)) / 1000000)).toFixed(2)}</td>
                                        <td onClick={this.inputa.bind(this, 'lmsm')} className="tconter">{additem.lmsm}</td>
                                        <td className="tconter">
                                            {/* {x.mbcz}/{x.gtcz} */}
                                            <select value={cid1} onChange={this.selectchange.bind(this, -1, 'GTLB')}>  {cate_GTCZhtml} </select>
                                        </td>
                                        <td className="operatebox">
                                            <div className='operate' >
                                               -
                                                {/* <p className='edit' onClick={this.save_cp.bind(this)}>保存</p> */}
                                                {/* <div data-toggle="modal" data-target="#modalOne">
                                                       <img src="./src/edit.png"/>
                                                       <p className='edit'  onClick={this.edit.bind(this,x)}>编辑</p>
                                                   </div> */}
                                                {/* <div>
                                                       <img src={`./src/${x.state=="1"?"hide":"show"}.png`}/>
                                                       <p className='edit' onClick={this.setshow.bind(this,x.id,x.state)}>{x.state=="0"?"隐藏":"显示"}</p>
                                                   </div> */}
                                                {/* <div>
                                                       <img src="./src/del.png"/>
                                                       <p className='edit colred' onClick={this.del.bind(this,x.id)}>删除</p>
                                                   </div> */}
                                            </div>
                                        </td>
                                    </tr>
                                }

                            </tbody>
                        </table>
                        <div className="tongji">
                            <p> 数量总计：{totalcount}</p>
                            <p> 总价：{total}</p>

                        </div>
                    </div>

                    <div className="content form">
                        <table className="tab">
                            <thead>
                                <tr>
                                    {/* <th className="minwidth tconter"><img src="./src/notselection.png"/></th> */}

                                    <th className="tconter">序号</th>
                                    <th className="cz tconter">五金类别</th>
                                    <th className="cz tconter">宽度</th>
                                    <th className="tconter">高度</th>
                                    <th className="cz tconter">深度</th>
                                    <th className="cz tconter">数量</th>
                                    <th className="cz tconter">单位</th>
                                    <th className="cz tconter">单价</th>
                                    <th className="cz tconter">总价</th>
                                    <th className="cz tconter">立面说明</th>
                                    <th className="tconter">备注</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    wj.map((x, i) => {
                                        return (
                                            <tr key={i}>
                                                {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                                <td className="tconter">{i + 1}</td>
                                               
                                                <td className="tconter">
                                                    {/* {x.mbcz}/{x.gtcz} */}
                                                    <select value={x.cid1} onChange={this.selectchange.bind(this, i, 'WJLB')}>  {cate_WJLBhtml} </select>
                                                </td>
                                                {/* <td className="tconter">
                                                    <select value={x.cid} onChange={this.selectchange.bind(this, i, 'WJLB')}>  {cate_WJLBhtml} </select>
                                                </td> */}

                                                <td className="tconter">-</td>
                                                <td className="tconter">-</td>
                                                <td className="tconter">-</td>
                                                <td onClick={this.input_1.bind(this, 'count',i)} className="tconter">{x.count}</td>
                                                <td className="tconter">{x.unit}</td>
                                                <td onClick={this.input_1.bind(this, 'singleprice',i)} className="tconter">{x.singleprice}</td>
                                                <td className="tconter">{(Number(x.singleprice) * Number(x.count)).toFixed(2)}</td>
                                                <td onClick={this.input_1.bind(this, 'lmsm', i)} className="tconter">{x.lmsm}</td>
                                                <td onClick={this.inputa.bind(this, 'cname')} className="tconter">{additem.cname1}</td>
                                                <td className="operatebox">
                                                    <div className='operate' id={"ope" + x.id}>
                                                        {/* <p className='edit' onClick={this.save_wj.bind(this, i)}>保存</p> */}
                                                        <p className='edit'  onClick={this.newline.bind(this,'showadd1')}>新建</p>
                                                        <div>
                                                            <img src="./src/del.png" />
                                                            <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        )

                                    })

                                }




                                {/* {
                                    <tr>
                                        <td className="tconter">新建行</td>
                                        <td className="tconter">
                                            <select value={additem.cid} onChange={this.selectchange.bind(this,-1,'CPLB')}>  {cate_CPLBhtml} </select>
                                        </td>
                                        <td onClick={this.inputa.bind(this, 'height')} className="tconter">{additem.height}</td>
                                        <td onClick={this.inputa.bind(this, 'width')} className="tconter">{additem.width}</td>
                                        <td onClick={this.inputa.bind(this, 'deep')} className="tconter">{additem.deep}</td>
                                        <td className="tconter">{additem.singleprice}</td>
                                        <td className="tconter">{((Number(additem.height) * Number(additem.width)) / 1000000).toFixed(2)}</td>
                                        <td className="tconter">{(Number(additem.singleprice) * ((Number(additem.height) * Number(additem.width)) / 1000000)).toFixed(2)}</td>
                                        <td className="tconter">{additem.unit}</td>
                                        <td onClick={this.inputa.bind(this, 'lmsm')} className="tconter">{additem.lmsm}</td>
                                        <td className="tconter">
                                            <select value={cid1} onChange={this.selectchange.bind(this,-1,'GTCZ')}>  {cate_GTCZhtml} </select>
                                        </td>
                                        <td className="operatebox">
                                            <div className='operate' >
                                                <p className='edit' onClick={this.save_cp.bind(this)}>保存</p>
                                               
                                            </div>
                                        </td>
                                    </tr>
                                } */}

                                {
                                    //  let amout = 0;
                                    <tr style={{display:showadd1||wj.length==0?"":"none"}}>
                                        {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                        {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                        <td className="tconter">新建行</td>
                                        <td className="tconter">
                                            {/* {x.mbcz}/{x.gtcz} */}
                                            <select value={additem1.cid1} onChange={this.selectchange.bind(this, -1, 'WJLB')}>  {cate_WJLBhtml} </select>
                                        </td>
                                       
                                        {/* <td className="tconter">
                                            <select value={additem1.cid} onChange={this.selectchange.bind(this, -1, 'WJLB')}>  {cate_WJLBhtml} </select>
                                        </td> */}
                                        <td className="tconter">-</td>
                                        <td className="tconter">-</td>
                                        <td className="tconter">-</td>
                                        <td onClick={this.inputb.bind(this, 'count')}>{additem1.count}</td>
                                        <td className="tconter">{additem1.unit}</td>
                                        <td className="tconter">{additem1.singleprice}</td> 
                                        <td className="tconter">{(Number(additem1.singleprice) * Number(additem1.count)).toFixed(2)}</td>
                                        <td onClick={this.inputb.bind(this, 'lmsm')} className="tconter">{additem1.lmsm}</td>
                                        <td onClick={this.inputb.bind(this, 'cname')}>{additem1.cname1}</td>
                                        <td className="operatebox">
                                        {/* <p className='edit'  onClick={this.newline.bind(this,'showadd1')}>新建</p> */}
                                            {/* <div className='operate' >
                                                <p className='edit' onClick={this.save_wj.bind(this)}>保存</p>
                                            </div> */}
                                        </td>
                                    </tr>
                                }

                            </tbody>
                        </table>
                        <div className="tongji">
                            <p> 数量总计：{totalcount1}</p>
                            <p> 总价：{total1}</p>

                        </div>
                    </div>


                </div >


            </div >
        )
    }
}





ReactDOM.render(
    <div>
        {/* <LeftMenu code='0' /> */}
        <FirstPage />
    </div>
    //<Barrage/>
    , $('.container')[0]
)